<template>
  <el-dialog :title="title" :close-on-click-modal="false" @close="close" :visible.sync="visible">
    <el-form :model="form" ref="form" size="mini" :rules="rules" v-loading="loading" :disabled="isDetail">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>基础设置</span>
        </div>
        <el-row>
          <el-col :span=12>
            <el-form-item label="网店编号" :label-width="formLabelWidth" prop="shopNo">
              <el-input v-model="form.shopNo"/>
            </el-form-item>
          </el-col>
          <el-col :span=12>
            <el-form-item label="网店名称" :label-width="formLabelWidth" prop="shopName">
              <el-input v-model="form.shopName"/>
            </el-form-item>
          </el-col>
          <el-col :span=12>
            <el-form-item label="网店平台" :label-width="formLabelWidth" prop="platform">
              <el-select v-model="form.platform"  clearable >
                <el-option v-for="item in platformOptions" :key="item.key" :label="item.value" :value="item.key"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span=12>
            <el-form-item label="出票部门" :label-width="formLabelWidth" prop="ticketDept">
              <el-select v-model="form.ticketDept" clearable>
                <el-option v-for="item in ticketDeptOptions" :key="item.key" :label="item.value" :value="item.key"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span=12>
            <el-form-item label="是否有效" :label-width="formLabelWidth" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span=24>
            <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
              <el-input v-model="form.remark"/>
            </el-form-item>
          </el-col>

        </el-row>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>导单设置</span>
        </div>
        <el-row>
          <el-col :span=12>
            <el-form-item label="接口账号" :label-width="formLabelWidth" prop="apiAccount">
              <el-input v-model="form.apiAccount"/>
            </el-form-item>
          </el-col>
          <el-col :span=12>
            <el-form-item label="接口密码" :label-width="formLabelWidth" prop="apiPwd">
              <el-input v-model="form.apiPwd"/>
            </el-form-item>
          </el-col>
          <el-col :span=24>
            <el-form-item label="接口地址" :label-width="formLabelWidth" prop="apiUrl">
              <el-input v-model="form.apiUrl"/>
            </el-form-item>
          </el-col>
          <el-col :span=12>
            <el-form-item label="安全码" :label-width="formLabelWidth" prop="sessionKey">
              <el-input v-model="form.sessionKey"/>
            </el-form-item>
          </el-col>
          <el-col :span=12>
            <el-form-item label="默认到订票员" :label-width="formLabelWidth" prop="defaultIssueUser">
              <el-select v-model="form.defaultIssueUser" clearable>
                <el-option v-for="item in issueUserOptions" :key="item.key" :label="item.value" :value="item.key"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <easy-button type="primary" @click="btnOk">确 定</easy-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default () {
        return {
          id: ''
        }
      }
    }
  },
  data () {
    const checkShopNo = (rule, value, callback) => {
      if (value) {
        this.$service.airOnlineShop.validateShopNo({
          id: this.data.id,
          shopNo: this.form.shopNo
        }).then(res => {
          if (res.data) {
            callback()
          } else {
            callback(new Error(rule.message))
          }
        })
      } else {
        callback()
      }
    }

    return {
      isDetail: false,
      loading: false,
      title: '',
      formLabelWidth: '120px',
      visible: true,
      issueUserOptions: [],
      ticketDeptOptions: [],
      platformOptions: [],
      form: {
        id: '',
        shopNo: '',
        shopName: '',
        platform: '',
        ticketDept: '',
        status: '',
        remark: '',
        apiAccount: '',
        apiPwd: '',
        apiUrl: '',
        sessionKey: '',
        defaultIssueUser: ''
      },
      rules: {
        shopNo: [
          {required: true, message: '请输入网店编号', trigger: 'blur'},
          {validator: checkShopNo, message: '网店编号重复', trigger: 'blur'}
        ],
        shopName: {required: true, message: '请输入网店名称', trigger: 'blur'},
        ticketDept: {required: true, message: '请选择出票部门', trigger: ['blur', 'change']},
        platform: {required: true, message: '请输入网店平台', trigger: ['blur', 'change']},
        apiUrl: {required: true, message: '请输入接口地址', trigger: 'blur'},
        defaultIssueUser: {required: true, message: '请选择订票人员', trigger: 'blur'}
      }
    }
  },
  created: function () {
    this.loadOptions()
  },
  methods: {
    loadDetail () {
      this.loading = true
      this.$service.airOnlineShop.detailAirOnlineShop({id: this.data.id}).then(res => {
        this.form = this.$lodash.pick(res.data, ['id', 'shopNo', 'shopName', 'platform',
          'ticketDept', 'status', 'remark', 'apiAccount', 'apiPwd', 'apiUrl', 'sessionKey', 'defaultIssueUser'])
      }).finally(() => {
        this.loading = false
      })
    },
    close () {
      this.$emit('close')
    },
    btnOk (done) {
      this.$refs['form'].validate((valid) => {
        // 校验通过
        if (valid) {
          this.submit(done)
        } else {
          done()
        }
      })
    },
    submit (done) {
      done()
    },
    loadOptions () {
      this.$service.airOnlineShop.loadIssueUserOption().then(res => {
        this.issueUserOptions = res.data
      })
      this.$service.airOnlineShop.loadTicketDeptOption().then(res => {
        this.ticketDeptOptions = res.data
      })
      this.$service.options.getPlatform().then(res => {
        this.platformOptions = res.data
      })
    }
  }
}
</script>

<style>

</style>
